<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-4">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type="hidden" name="avatar" />
          <figure class="figure">
            <input type="file" id="upload"  />
            <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded" alt="..." />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script>
    window.addEventListener('load', async function () {
      axios.defaults.baseURL = 'http://ajax-api.itheima.net'
      const res = await axios({
        url: '/api/settings'
      })
      // console.log(res)
      const { nickname, province, city, area, avatar } = res.data.data
      document.querySelector('[name=nickname]').value = nickname
      document.querySelector('.figure-img').src = avatar
      document.querySelector('[name="avatar"]').value = avatar
      // 获取省份
      const proRes = await axios({
        url: '/api/province'
      })
      // console.log(proRes.data.data)
      let proInput = document.querySelector('[name=province]')
      proInput.innerHTML = proRes.data.data.map(item => {
        return `<option value="${item}">${item}</option>`
      }).join('')
      proInput.value = province

      // 获取市
      const cityRes = await axios({
        url: '/api/city',
        params: {
          pname: province
        }
      })
      let cityInput = document.querySelector('[name=city]')
      cityInput.innerHTML = cityRes.data.data.map(item => {
        return `<option value="${item}">${item}</option>`
      }).join('')
      cityInput.value = city

      // 获取区
      const areaRes = await axios({
        url: `/api/area?pname=${proInput.value}&cname=${cityInput.value}`,
      })
      let areaInput = document.querySelector('[name=area]')
      areaInput.innerHTML = areaRes.data.data.map(item => {
        return `<option value="${item}">${item}</option>`
      }).join('')
      areaInput.value = area

      // 省市区联动 改变省
      proInput.addEventListener('change', async function () {
        const newCityRes = await axios({
          url: '/api/city',
          params: {
            pname: this.value
          }
        })
        // console.log('新的省', newCityRes)
        cityInput.innerHTML = newCityRes.data.data.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
        const newAreaRes = await axios({
          url: '/api/area',
          params: {
            pname: proInput.value,
            cname: cityInput.value
          }
        })
        areaInput.innerHTML = newAreaRes.data.data.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
      })
      // 省市区联动 改变市
      cityInput.addEventListener('change', async function () {
        const newAreaRes = await axios({
          url: '/api/area',
          params: {
            pname: proInput.value,
            cname: cityInput.value
          }
        })
        areaInput.innerHTML = newAreaRes.data.data.map(item => {
          return `<option value="${item}">${item}</option>`
        }).join('')
      })
    })

    // 长传头像模块
    const img = document.querySelector('img')
    const upload = document.querySelector('#upload')
    img.addEventListener('click', function () {
      upload.click()
    })
    upload.addEventListener('change', async function (e) {
      const data = new FormData()
      data.append('avatar', e.target.files[0])
      const res = await axios({
        url: '/api/file',
        method: 'post',
        data
      })
      img.src = res.data.data.url
      document.querySelector('[name="avatar"]').value = res.data.data.url
    })

    // 保存表单模块
    document.querySelector('form').addEventListener('submit', async function (e) {
      e.preventDefault()
      const data = serialize(this, { hash: true })
      const res = await axios({
        url: '/api/settings',
        method: 'put',
        data
      })
      alert('修改成功')
    })
  </script>
</body>

</html>